<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          首页
          <!-- <a href="../main">首页</a> -->
        </a-breadcrumb-item>
        <a-breadcrumb-item>系统配置</a-breadcrumb-item>
        <a-breadcrumb-item>停车场配置</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <template>
            <div style="margin: 0 50px 0 50px">停车点名称</div>
            <a-select
              showSearch
              placeholder="选择停车点"
              optionFilterProp="children"
              style="margin-right: 100px; width: 200px"
              :allowClear="true"
              v-model="selectParkName"
              @change="parkChange"
            >
              <a-select-option
                v-for="p in parkList"
                :key="p.id"
                :value="p.parkName"
                >{{ p.parkName }}
              </a-select-option>
            </a-select>
          </template>
          <template>
            <div style="margin: 0 50px">城市</div>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputCityName"
              @change="cityList"
              placeholder="城市名称"
            />
          </template>
        </div>
          <div class="box-condition-item">
          <template>
            <div style="margin: 0 50px 0 50px">关联路牙设备催缴:</div>
            <el-switch
              style="display: block"
              v-model="call"
              @change="changeCall"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="关闭"
            >
            </el-switch>
          </template>

            <template>
                <div style="margin: 0 50px 0 50px">进行中订单开关:</div>
                <el-switch
                        style="display: block"
                        v-model="orderPay"
                        @change="changeOrderPay"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="开启"
                        inactive-text="关闭"
                >
                </el-switch>
            </template>

          <template>
            <div style="margin: 0 50px 0 50px">道闸场导航:</div>
            <el-switch
              style="display: block"
              v-model="fenceNavigation"
              @change="changeNavigation"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="开启"
              inactive-text="关闭"
            >
            </el-switch>
          </template>
        </div>
      </div>
    </div>

    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button type="primary" @click="addClick" icon="plus">添加</a-button>
          <a-button type="primary" @click="editClick" icon="edit"
            >编辑</a-button
          >
          <a-button type="primary" @click="spaceTruckClick" icon="align-left"
            >车位</a-button
          >
          <a-button type="primary" @click="downloadDataClick" icon="download"
            >导出</a-button
          >
          <a-popconfirm
            title="确认删除？"
            okText="确认"
            cancelText="取消"
            @confirm="deleteClick"
            placement="topLeft"
          >
            <a-button type="danger" icon="delete">删除</a-button>
          </a-popconfirm>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
          @change="queryPageData"
        />
      </div>
    </div>
  </div>
</template>

<script>
    import ParkApi from "../../api/system/ParkApi";
    import ParkingSpace from "../../api/ParkingSpace";
    import CommonApi from "../../api/CommonApi";

    const columns = [
  { title: "序号", dataIndex: "no", width: "5%" },
  { title: "停车点", dataIndex: "parkName", width: "10%" },
  { title: "停车场类型", dataIndex: "typeStr", width: "10%" },
  { title: "总车位数", dataIndex: "sumTruckSpace", width: "5%" },
  {
    title: "已绑定设备车位数目",
    dataIndex: "bindImeiTruckSpace",
    width: "10%",
  },
  { title: "城市", dataIndex: "city", width: "5%" },
  { title: "地址", dataIndex: "address", width: "10%" },
  { title: "创建时间", dataIndex: "createdTime", width: "10%" },
  { title: "所属业主id", dataIndex: "landlordId", width: "5%" },
  { title: "所属业主名称", dataIndex: "landlordName", width: "5%" },
];
const dataSource = [];
const queryCondition = {
  limit: "10",
  curr: "1",
  parkName: "",
  cityName: "",
};
const deleteCondition = {
  id: "",
};

export default {
  name: "ParkingLotSetting",
  /*数据层*/
  data() {
    return {
      parkList: [],
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 10,
        current: 1,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",

      /** 其他 **/
      inputCityName: "",
      selectParkName: [],

      queryCondition,
      deleteCondition,
      call: "",
      fenceNavigation: "",
      timer: null,
      loading: false,
      orderPay: "",
    };
  },
  /*方法层*/
  methods: {
    /**组件部分相关方法**/
    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          },
        },
      };
    },

    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /* --------------- 按钮 --------------- */
    addClick() {
      this.$router.push({
        path: "/system/ParkEdit",
        // query: {
        //     data: this.currRowData
        // }
      });
    },

    editClick() {
      let currRowData = this.currRowData;
      if (currRowData == undefined || currRowData == "") {
        return this.$message.warn("请选择编辑的数据");
      }
      this.$router.push({
        path: "/system/ParkEdit",
        query: {
          data: this.currRowData,
        },
      });

      //todo 编辑停车点
    },

    deleteClick() {
      let currRowData = this.currRowData;
      if (currRowData == undefined || currRowData == "") {
        return this.$message.warn("请选择要删除的数据！");
      }
      let deleteCondition = this.deleteCondition;
      deleteCondition.id = currRowData.id;
      ParkApi.delPark(deleteCondition)
        .then(() => {
          this.$message.success("删除成功！");
          this.queryData();
        })
        .catch((error) => {
          console.log("停车点删除异常！", error);
        });
    },
    spaceTruckClick() {
      let item = this.getClickItem();
      if (!item) {
        this.$router.push(`/system/TruckSpaceEdit`);
        return;
      }
      this.$router.push(`/system/TruckSpaceEdit?id=${item.id}`);
    },

    downloadDataClick() {
      let condition = {
        parkName: this.selectParkName,
        cityName: this.inputCityName,
      };
      ParkingSpace.exportParkExcel(condition)
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let fileName = decodeURIComponent(res.headers.filename);
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${fileName}`);
          link.click();
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
          console.log("导出欠费记录数据异常！", err);
        });
    },

    /* --------------- 数据处理 --------------- */
    queryPageData(page) {
      this.queryData(page.current);
    },

    queryData(pageNum) {
      this.loading = true;
      this.clearSelect();
      let condition = this.queryCondition;
      condition.parkName = this.selectParkName;
      condition.cityName = this.inputCityName;
      condition.curr = pageNum || 1;

      ParkApi.getParkListBy(condition)
        .then((data) => {
          let { list, total, pageNum, pageSize } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          for (var ty in array) {
            if (array[ty].type == 1) {
              array[ty].typeStr = "路边停车点";
            } else {
              array[ty].typeStr = "停车场停车点";
            }
          }
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((error) => {
          console.log("获取停车点列表数据异常！", error);
          this.$message.error("获取停车点列表数据异常！");
          this.loading = false;
        });
    },

    clearSelect() {
      this.tableState.rowId = -1;
      this.currRowData = "";
    },

    getClickItem() {
      return this.dataSource.filter(
        (item) => item.id == this.tableState.rowId
      )[0];
    },

    /* --------------- 停车点列表 --------------- */
    initParkList() {
      CommonApi.getParkList()
        .then((data) => {
          this.parkList = data.data;
        })
        .catch(() => {
          this.$message.error("获取停车点列表数据异常！");
        });
    },

    parkChange() {
      this.queryData();
    },
    changeCall() {
      ParkApi.saveCallingRelated({ call: this.call }).then((res) => {
        if (res.code == 2000) {
          return this.$message.success("修改催缴机制成功");
        } else {
          return this.$message.warn(res.msg);
        }
      });
    },
    changeNavigation() {
      ParkApi.saveNavigation({ navigation: this.fenceNavigation }).then(
        (res) => {
          if (res.code == 2000) {
            return this.$message.success("修改小程序道闸场导航功能成功");
          } else {
            return this.$message.warn(res.msg);
          }
        }
      );
    },
    cityList() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.queryData, 800);
    },
    changeOrderPay() {
      ParkApi.saveOrderPayStatus({ orderPay: this.orderPay }).then((res) => {
          if (res.code == 2000) {
              return this.$message.success("修改进行中订单开关成功");
          } else {
              return this.$message.warn(res.msg);
          }
      });
    },
  },

  computed: {},

  mounted() {
    this.initParkList();
    this.queryData();
    ParkApi.callingRelatedConfiguration().then((res) => {
      console.log(res);
      if (res.code == 2000) {
        this.call = res.data.call;
        this.fenceNavigation = res.data.fence;

        this.orderPay = res.data.orderIngFlag;
      }
    });
    console.log(this.call);
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: auto;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  padding: 20px 0;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-tool button {
  margin-right: 10px;
}
</style>
